<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="deviceName"
        placeholder="请输入设备名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>
    <el-tree
      @node-click="handleNodeClick"
      ref="tree"
      :filter-node-method="filterNode"
      lazy
      :load="loadNode"
      :props="props"
      node-key="id"
      class="treeStyle"
    >
    </el-tree>
  </div>
</template>

<script>
import { DeviceTree } from '@/api'
export default {
  data () {
    return {
      props: {
        label: 'equiDesc',
        isLeaf: 'leaf',
        id: 'floc'
      }
    }
  },
  methods: {
    // 树节点点击
    handleNodeClick (data) {
      console.log(data)
      this.floc = data.floc
    },
    // 筛选节点
    filterNode (value, data) {
      if (!value) return true
      return data.equiDesc.indexOf(value) !== -1
    },
    // 懒加载树
    loadNode (node, resolve) {
      // 如果展开第一级节点，从后台加载一级节点列表
      if (node.level === 0) {
        this.loadfirstnode(resolve)
      }
      // 如果展开其他级节点，动态从后台加载下一级节点列表
      if (node.level >= 1) {
        this.loadchildnode(node, resolve)
      }
    },
    // 加载第一级节点
    async loadfirstnode (resolve) {
      const params = {
        floc: null
      }
      const res = await DeviceTree.getTree(this, params, null, {
        showMask: false
      })
      // 将设备的kks拼接到名字后面
      res.data.forEach((item) => {
        item.equiDesc = `${item.equiDesc}(${item.floc})`
      })

      return resolve(res.data)
    },
    // 加载节点的子节点集合
    async loadchildnode (node, resolve) {
      const params = {
        floc: node.data.floc
      }
      const res = await DeviceTree.getTree(this, params, null, {
        showMask: false
      })
      res.data.forEach((item) => {
        item.equiDesc = `${item.equiDesc}(${item.floc})`
      })
      return resolve(res.data)
    }
  }
}
</script>

<style>
</style>
